fix(init): generate webpack.config.ts instead of webpack.config.js when TypeScript is selected by ThierryRakotomanana · Pull Request #4723 · webpack/webpack-cli

ThierryRakotomanana · 2026-03-31T12:07:16Z

Summary
When running npx create-webpack-app and selecting TypeScript as the language, the generator creates webpack.config.js instead of webpack.config.ts.

Changing it directy lead to multiple errors as ts-node is not add as dependency,
webpack -c ./webpack.config.ts doesn't work.
tsconfig.json still use depreacted config, like es5 as target, that creates a compiler error

What kind of change does this PR introduce?
Fix :

Make the webpack config filename dynamic based on langType answer
Replace webpack.config.js.tpl with a unified webpack.config.tpl that renders JS or TS syntax based on langType
Add import webpack from "webpack" and typed webpack.Configuration annotation in the TS output
Add conditional import "webpack-dev-server" when devServer is selected
Add ts-node to devDependencies when TypeScript is selected
Add NODE_OPTIONS='--loader ts-node/esm --no-warnings to load webpack.config.ts in the package.jso
Update tests to assert webpack.config.ts is generated for TypeScript projects

Did you add tests for your changes?
Yes, and I updated the test case

Does this PR introduce a breaking change?
Not really,

If relevant, what needs to be documented once your changes are merged or what have you already documented?

The Typescript docs, but I am already on it.
Use of AI
No

changeset-bot · 2026-03-31T12:07:21Z

🦋 Changeset detected

Latest commit: 57f8de2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-webpack-app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

codecov · 2026-03-31T12:10:28Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.44%. Comparing base (c86a11c) to head (57f8de2).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4723   +/-   ##
=======================================
  Coverage   91.43%   91.44%           
=======================================
  Files          14       14           
  Lines        4716     4721    +5     
  Branches      679      682    +3     
=======================================
+ Hits         4312     4317    +5     
  Misses        402      402           
  Partials        2        2

Files with missing lines	Coverage Δ
.../create-webpack-app/src/generators/init/default.ts	`93.83% <100.00%> (+0.14%)`	⬆️

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c86a11c...57f8de2. Read the comment docs.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5

alexander-akait · 2026-03-31T12:28:56Z

packages/create-webpack-app/templates/init/default/package.json.tpl

@@ -1,14 +1,14 @@
-{
+<% const nodeOptions = langType === "Typescript" ? "NODE_OPTIONS='--loader ts-node/esm --no-warnings' " : ""; %>{


We support loading from typescript out of box using Node.js API (with fallback), so I don't think we need it here

And never use --no-warnings, it is a very bad practice

And never use --no-warnings, it is a very bad practice

My bad! will never use it again

We support loading from typescript out of box using Node.js API (with fallback), so I don't think we need it here

I've test it and Webpack only supports loading TypeScript configurations for CommonJS. It doesn't truly support a TypeScript config written in ESM yet.

Even after installing the necessary dependencies (like ts-node and @types/node) and setting up the right tsconfig, you’ll still run into this error if you try to use ECMAScript syntax:

[webpack-cli] Failed to load 'webpack.config.ts' config ▶ ESM (`import`) failed: Unknown file extension ".ts" ▶ CJS (`require`) failed: Cannot require() ES Module /home/thierry/Projects/type-webpack/webpack.config.ts because it is not yet fully loaded. This may be caused by a race condition if the module is simultaneously dynamically import()-ed via Promise.all(). Try await-ing the import() sequentially in a loop instead. (from /home/thierry/Projects/type-webpack/node_modules/webpack-cli/lib/webpack-cli.js) This is caused by either a bug in Node.js or incorrect usage of Node.js internals. Please open an issue with this stack trace at https://github.com/nodejs/node/issues

Right now, to fix it, which the official documentation also suggests (way to use webpack.confi.ts), is to use NODE_OPTIONS. Running webpack -c ./webpack.config.ts directly only works if the TypeScript file is written using CommonJS patterns.

In this cae let's use NODE_OPTIONS, but very weird why it doesn't support, because we have tests

To be honest, I’ve been investigating it and spent the whole week trying to fix it. I just need a bit more time to make some tests and ensure it follows the existing architectural patterns. I’m planning to submit another PR as feat: support for ecma typescript config today or tomorrow. After this, no more need for NODE_OPTIONS if no problem.

+1 we dont need ts loader, node strips types out of the box now.

@evenstensberg Yes, I think we should update the documentation on this

alexander-akait

Let's fix problems

ThierryRakotomanana · 2026-04-06T14:49:54Z

So @alexander-akait here we don't need ts-node and NODE_OPTION anymore since it will use Node22 from this month?

alexander-akait · 2026-04-06T15:26:48Z

I think for typescript we can use only ECMA syntax and so use built-in Typescript Node.js API

-Add ts-node to load the configuration file

- Replace `webpack.config.js.tpl` with a unified `webpack.config.tpl` based on `langType` - Add conditional `import "webpack-dev-server"` when devServer is selected - Add `ts-node` to devDependencies when TypeScript is selected - Update tests to assert `webpack.config.ts` is generated for TypeScript projects

\n Node22 natively support typescript

…line

test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5

packages/create-webpack-app/templates/init/default/tsconfig.json.tpl

alexander-akait · 2026-04-07T18:58:06Z

packages/create-webpack-app/templates/init/default/tsconfig.json.tpl

  },
-  "files": ["src/index.ts"]
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]


Very weird, because it should be failed without ./ when you are using typescript@6

packages/create-webpack-app/templates/init/default/tsconfig.json.tpl

alexander-akait

Let's do couple improvements and we can merge

ThierryRakotomanana · 2026-04-07T19:01:44Z

Let's do couple improvements and we can merge

let's go

alexander-akait · 2026-04-07T19:02:55Z

So @alexander-akait here we don't need ts-node and NODE_OPTION anymore since it will use Node22 from this month?

Yes, there is no point in support ts-node by default, if someone needs it, they can find plenty of examples on the Internet

ThierryRakotomanana · 2026-04-07T19:10:22Z

@alexander-akait @evenstensberg This is completely off-topic, but what do you think if I changed the CLI UI for the help command like this?

Before	After

alexander-akait · 2026-04-07T19:53:39Z

@ThierryRakotomanana I like it, feel free to start it after we resolve it

alexander-akait · 2026-04-07T19:54:29Z

Don't forget we support webpack help build (to get help for build command), so I think we should improve it too

ThierryRakotomanana · 2026-04-07T20:22:26Z

Don't forget we support webpack help build (to get help for build command), so I think we should improve it too

Got it, will start with the help command first

test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5

alexander-akait · 2026-04-07T23:01:34Z

@ThierryRakotomanana oh, forgot to check, do we add jsx when react selected, feel free to test it manually and fix it in the separate PR, same for vue ("jsx": "preserve", "jsxImportSource": "vue") and svelte

alexander-akait reviewed Mar 31, 2026

View reviewed changes

test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 Outdated Show resolved Hide resolved

alexander-akait reviewed Mar 31, 2026

View reviewed changes

test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 Show resolved Hide resolved

alexander-akait reviewed Mar 31, 2026

View reviewed changes

test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 Outdated Show resolved Hide resolved

alexander-akait reviewed Mar 31, 2026

View reviewed changes

alexander-akait requested changes Mar 31, 2026

View reviewed changes

ThierryRakotomanana mentioned this pull request Apr 5, 2026

feat(config): support all TS webpack configs using esbuild fallback #4726

Closed

ThierryRakotomanana added 4 commits April 7, 2026 18:10

fix(generator): generate a ts confi file

65ce966

-Add ts-node to load the configuration file

feat(typescript): delete unecessary loader & deps

0fc6e9d

\n Node22 natively support typescript

refactor: removed extra space & unecessary loaders

35458fb

ThierryRakotomanana force-pushed the fix/default-generator-typescript-config-extension branch from c13517d to 35458fb Compare April 7, 2026 16:08

refactor(init): update tests and format the template to remove extra …

418f434

…line